<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="addGoods">添加</el-button>
    <!-- 表格 -->
    <!-- :border表示是否有竖边框 -->
    <!--
      element-ui 是以列进行展示
        type="index"表示展示序号
        prop 对应内容的字段名，需要渲染的列的数据
    -->
    <el-table style="width: 100%; margin: 20px 0" :border="true" :data="list">
      <el-table-column type="index" label="序号" width="80px" align="center" />
      <el-table-column prop="tmName" label="品牌名称" align="center" />
      <el-table-column prop="logoUrl" label="品牌LOGO" align="center">
        <!-- slot-scope接收两个参数，一个row，即item，另一个$index，即索引值， 名字不能乱起 -->
        <template slot-scope="{ row }"> <img :src="row.logoUrl" style="width: 100px; height: 100px" /></template>
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="modifyGoods(row)">修改</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteGoods(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!--
      current-page: 当前页
      page-size:  每一页需要展示多少条数据
      page-sizes: 设置每一页展示多少条数据
      layout： 布局
      total： 总共多少条数据
      ->    向右贴边
      page-count  按钮数量，如果是9，连续页数为7
     -->
    <el-pagination style="text-align: center" :current-page="page" :page-sizes="[3, 5, 10]" :page-size="limit" :total="total" :page-count="7" layout=" prev, pager, next, jumper, -> ,sizes, total" @size-change="handleSizeChange" @current-change="getTradeMarkList" />

    <!--
       对话框
        :visible.sync 控制对话框的显示隐藏
    -->
    <el-dialog :title="tmForm.id ? '修改商品' : '添加商品'" :visible.sync="dialogFormVisible">
      <!-- el-form   model:表示收集表单数据 表单验证也需要这个属性 -->
      <!-- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可 -->
      <el-form ref="ruleForm" style="width: 80%" :model="tmForm" :rules="rules">
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input v-model="tmForm.tmName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <!-- 上传LOGO -->
          <!--
            el-upload
              action:必选参数，上传的地址, 必须带/dev-api参数
              on-success:上传成功触发函数
              before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
           -->
          <el-upload class="avatar-uploader" action="/dev-api/admin/product/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTradeMark">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TradeMark',
  data() {
    // 自定义表单验证
    var validateName = (rule, value, callback) => {
      if (value.length < 2 || value.length > 10) {
        callback(new Error('品牌名称2-10位'))
      } else {
        callback() // 成功放行
      }
    }
    return {
      // 当前页
      page: 1,
      // 当前页展示数据条数
      limit: 3,
      // 总数据条数
      total: 0,
      // 展示列表的数据
      list: [],
      // 对话框的显示与隐藏
      dialogFormVisible: false,
      // 上传LOGO url
      // 表单数据收集 这里的字段不能乱写，根据接口来写
      tmForm: {
        logoUrl: '',
        tmName: ''
      },
      // 表单验证
      rules: {
        tmName: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' },
          // { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'change' }
          // 自定义校验规则
          { validator: validateName, trigger: 'blur' }
        ],
        logoUrl: [
          {
            required: true,
            message: '请上传品牌LOGO'
          }
        ]
      }
    }
  },
  mounted() {
    // 获取商品列表数据
    this.getTradeMarkList()
  },

  methods: {
    // 获取商品列表数据
    // pager = 1当数据没有返回时，默认是第一页
    async getTradeMarkList(pager = 1) {
      this.page = pager
      // 解构出page，limit，即省略this
      const { page, limit } = this
      const res = await this.$API.tradeMark.reqTradeMarkList(page, limit)
      // console.log(res)
      if (res.code === 200) {
        this.total = res.data.total
        this.list = res.data.records
      }
    },
    // 跳转到点击的页面 优化：本质也是请求数据，可以放到getTradeMarkList里
    // handleCurrentChange(pager) {
    //   // console.log(pager)
    //   this.page = pager
    //   this.getTradeMarkList()
    // },
    // 点击修改页面展示条数按钮，显示相应数据
    handleSizeChange(limit) {
      // console.log(limit)
      this.limit = limit
      this.getTradeMarkList()
    },

    // 添加商品按钮
    addGoods() {
      // 显示对话框
      this.dialogFormVisible = true
      // 清除数据，处理点击取消后书包保留的问题
      this.tmForm = {
        logoUrl: '',
        tmName: ''
      }
    },

    // 修改商品按钮
    modifyGoods(row) {
      this.dialogFormVisible = true
      // console.log(row)
      // 收集表单数据 浅拷贝，tmName属性是双向绑定数据，不能直接修改服务器返回的数据，需要浅拷贝
      this.tmForm = { ...row }
    },

    // 上传LOGO相关处理函数
    // 上传成功处理函数
    handleAvatarSuccess(res, file) {
      // console.log(res, file)
      this.tmForm.logoUrl = res.data
    },
    // 上传图片之前判断图片是否符合要求
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    // 新增或修改商品
    addOrUpdateTradeMark() {
      // console.log(this.$refs.ruleForm)
      this.$refs.ruleForm.validate(async (valid) => {
        // valid 变淡验证成功返回true
        if (valid) {
          // 关闭对话框
          this.dialogFormVisible = false
          // 发请求，（添加或修改商品）
          const res = await this.$API.tradeMark.reqAddOrUpdateTradeMark(this.tmForm)
          // console.log(res)
          if (res.code === 200) {
            // 弹出信息
            this.$message({
              type: 'success',
              message: this.tmForm.id ? '修改商品成功' : '添加商品成功'
            })
            // 获取新的列表
            this.getTradeMarkList(this.tmForm.id ? this.page : 1)
          }
        } else {
          return this.$message.error(this.tmForm.id ? '请添加品牌名称和上传品牌LOGO' : '请修改品牌名称和上传品牌LOGO')
        }
      })
    },

    // 删除品牌
    deleteGoods(row) {
      this.$confirm(`您确定删除${row.tmName}吗`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }) // 成功
        .then(async () => {
          const res = await this.$API.tradeMark.deleteTradeMarkList(row.id)
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 判断当前页面停留位置
            // this.getTradeMarkList(this.list.length <= 1 ? this.page - 1 : this.page)
            this.getTradeMarkList(this.list.length > 1 ? this.page : this.page - 1)
          }
        }) // 失败
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
